// if isIon
import mithrilLogo from '../assets/mithril.svg'
import viteLogo from '/vite.svg'
import ionicLogo from '/ionic.svg'
import { PageHeader } from "../components/header"
import { makeid } from '../lib/utils'

// if isTs
type VitriolModalAttrs = {
  trigger: string
  cb?: (data?: string) => void
}
// end isTs

export function VitriolModal() {

  function renderModalContent(attrs/*@ts : VitriolModalAttrs */) {
    return (
      // if isJSX
      <ion-modal trigger={attrs.trigger}>
        <PageHeader />
        <ion-content fullscreen="true" class="ion-padding">
          <div>
            <a href="https://vitejs.dev" target="_blank">
              <img src={viteLogo} class="logo" alt="Vite logo" />
            </a>
            <a href="https://mithril.js.org" target="_blank">
              <img src={mithrilLogo} class="logo mithril" alt="Mithril logo" />
            </a>
            <a href="https://ionicframework.com/" target="_blank">
              <img src={ionicLogo} class="logo" alt="Ionic logo" />
            </a>
          </div>

          <h2>Vite + Mithril + Ionic</h2>

          <ion-button color="success" onclick={submit} >OK</ion-button>
          <br />
          <ion-button color="danger" onclick={() => { modal.dismiss(undefined, 'cancel') }} >Cancel</ion-button>
        </ion-content>
      </ion-modal>
      // else isJSX
      m("ion-modal", { trigger: attrs.trigger }, [
        m(PageHeader),
        m("ion-content", { fullscreen: true, class: "ion-padding" }, [
          m("div", [
            m("a", { href: "https://vitejs.dev", target: "_blank" }, [
              m("img", { src: viteLogo, class: "logo", alt: "Vite Logo" })
            ]),
            m("a", { href: "https://mithril.js.org", target: "_blank" }, [
              m("img", { src: mithrilLogo, class: "logo mithril", alt: "Mithril Logo" })
            ]),
            m("a", { href: "https://ionicframework.com/", target: "_blank" }, [
              m("img", { src: ionicLogo, class: "logo", alt: "Ionic Logo" })
            ])
          ]),
          m("h2", "Vite + Mithril + Ionic"),
          m("ion-button", { color: "success", onclick: submit }, 'OK'),
          m("br"),
          m("ion-button", { color: "danger", onclick: () => { modal.dismiss(undefined, 'cancel') } }, 'Cancel')
        ])
      ])
      // end isJSX
    )
  }

  let modal/*@ts : any */

  function submit() {
    modal.dismiss(makeid(10), 'submit')
  }
  return {
    
    oncreate: (vnode/*@ts : m.Vnode<VitriolModalAttrs> */) => {
      modal = vnode.dom 
      modal.backdropDismiss = false;

      modal.addEventListener('willDismiss', (ev/*@ts : any */) => {
        if (ev.detail.role == 'submit') {
          typeof vnode.attrs.cb == 'function' && vnode.attrs.cb(ev.detail.data);
        }
      });

    },
    view: ({ attrs }/*@ts : m.Vnode<VitriolModalAttrs> */) => {
      return renderModalContent(attrs)
    }
  }
}

// end isIon